<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<% 
	String context = request.getContextPath(); 
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>用户管理</title>
<%@include file="/html/shiro/jsps/common/common.jsp"%>
<script type="text/javascript">
	$(function() {
		//组件
		var userDatagrid,selectedRoleDatagrid,allRoleDatagrid, userDialog, userForm;
		userDatagrid = $("#userDatagrid");
		selectedRoleDatagrid = $("#selectedRoleDatagrid");
		allRoleDatagrid = $("#allRoleDatagrid");
		userDialog = $("#userDialog");
		userForm = $("#userForm");
		// 创建通配符把当前模块所有的功能，都打包到这个对象上
		var cmdObj = {
			edit : function() {
				var rowData = userDatagrid.datagrid("getSelected");
				if (!rowData) {
					jQuery.messager.alert("温馨提示", "请先选择数据！", "info");
					return;
				}
				userForm.form("clear");
				userForm.form("load", rowData);
				selectedRoleDatagrid.datagrid("loadData",{total:0,rows:rowData.roles})
				userDialog.dialog("open");
			},
			reload : function() {
				//调用重新加载数据的方法
				userDatagrid.datagrid("reload");
			},
			save : function() {
				//提交表单
				userForm.form('submit', {    
				    url:"<%=context%>/user/save",    
				    onSubmit: function(param){  
				    	//拼装用户所需要的对应角色
				    	var allRows = selectedRoleDatagrid.datagrid('getRows');
				    	$.each(allRows,function(index,obj){
				    		param['roles['+index+'].roleId'] = obj.roleId; 
				    	})
				    }    
				});
			},
			cancel : function() {
				//关闭对话框
				userDialog.dialog("close");
			},
/* 			search : function() {
				//简单搜索：查询条件必须少
				userDatagrid.datagrid("load", $("#searchForm").serializeJSON());
			} */
		};
		// 初始化组件
		userDatagrid.datagrid({
			url:"<%=context%>/user/list",
			title:"角色管理",
			fit:true,
			border:false,
			fitColumns:true,
			singleSelect:true,
			pagination:true,
			rownumbers:true,
			columns:[[    
		        {field:'userName',title:'用户名称',width:20},    
		        {field:'roles',title:'用户角色',width:100,formatter:arrayFormatter}    
		    ]],
		    toolbar: [
		    	{
					iconCls: 'icon-edit',
					text:"修改",
					handler: cmdObj['edit']
				},
		    	{
					iconCls: 'icon-reload',
					text:"刷新",
					handler: cmdObj['reload']
				},
			]

			
		});
		allRoleDatagrid.datagrid({
			width: 420,
			height: 330,
			url:"<%=context%>/role/list",
			title:"所有角色",
			border : true,
			fitColumns : true,
			striped : true,
			rownumbers : true,
			singleSelect : true,
			pagination : true,
			onDblClickRow: function(index,row){
				//判断是否存在
				var allRows = selectedRoleDatagrid.datagrid('getRows');
				var flag = false;
				$.each(allRows,function(index,obj){
					if (obj.roleId==row.roleId) {
						jQuery.messager.alert('温馨提示', '请不要重复添加', 'info');
						flag =true;
						return;
					}
				});
				//往已选表格添加一条记录
				if (!flag) {
					selectedRoleDatagrid.datagrid('appendRow',row);
				}
			},
			columns:[[    
		        {field:'roleName',title:'名称',width:10},    
		    ]]
		});
		
		selectedRoleDatagrid.datagrid({
			title:"已选角色",
			width: 400,
			height: 330,
			border:false,
			fitColumns:true,
			singleSelect:true,
			rownumbers:true,
			onDblClickRow: function(index,row){
				//删除行
				selectedRoleDatagrid.datagrid("deleteRow",index);
			},
			columns:[[    
		        {field:'roleName',title:'名称',width:10},    
		    ]]   
		});
		
		userDialog.dialog({
			width: 850,
			height: 450,
			title:"修改角色",
			closed:true,
			modal:true,
			buttons:[{
				text:'保存',
				iconCls:'icon-ok',
				handler:cmdObj['save']
			},{
				text:'关闭',
				iconCls:'icon-cancel',
				handler:cmdObj['cancel']
			}]
		});
		
		// 初始化添加表单
		userForm.form({
			url : "<%=context%>/user/save",
			onSubmit : function() { // 在表单‘提交前’，做验证
				return userForm.form("validate");
			},
			success : function(data) {//data是后台save方法返回的字符串
				// 把字符串转变成json对象
				data = jQuery.parseJSON(data);
				// 判断结果
				if (data.success) {
					// 关对话框
					userDialog.dialog("close");
					jQuery.messager.alert("温馨提示", data.msg, "info", function() {
						//调用重新加载数据的方法
						userDatagrid.datagrid("reload");
					});
				} else {
					jQuery.messager.alert('错误提示', data.msg, 'error');
				}
			}
		});
		
		//对页面所有按钮，统一监听
		$("a[data-cmd]").on("click", function() {
			// 获取对应按钮的cmd信息 
			//var cmd = $(this).attr("data-cmd");
			var cmd = $(this).data("cmd");
			// console.debug(cmd);
			if (cmdObj[cmd]) {
				//组件的disabled禁用属性,无法控制事件.
				//判断按钮是否有禁用样式.
				if ($(this).hasClass("l-btn-disabled")) {
					return;
				}
				//动态的方法名称，就调用动态的方法
				cmdObj[cmd]();
			}
		});
	});
</script>
</head>
<body>
	<!-- 数据表格 -->
	<table id="userDatagrid" ></table>
	<!-- 添加编辑对话框 -->
	<div id="userDialog">
	     <table>
	         <!-- 角色本身表单 -->
	     	<tr>
	     		<td colspan="2">
	     			<form id="userForm" method="post">
						<input name="userId" type="hidden" />
						<table>
							<tr>
								<td>名称：<input name="userName" class="easyui-validatebox" required="true" readonly="readonly"/></td>
							</tr>
						</table>
				</form>
	     		</td>
	     	</tr>
	     	<tr>
				<td>
					<!--已选角色 -->
					<table id="selectedRoleDatagrid" ></table>
				</td>
				<td>
					<!--所有角色 -->
					<table id="allRoleDatagrid" ></table>
				</td>
			</tr>
	     </table>
		
	</div>
	
</body>
</html>